<template>
  <main>
    <h1>TodoList</h1>
    <div class="switch-mode">
      <el-switch
        v-model="showDoneList"
        active-color="#5aa469"
        inactive-color="#d35d6e"
        active-text="已完成"
        inactive-text="未完成">
      </el-switch>
    </div>
    <div class="input-todo-titke">
      <el-input v-model.tirm="title" placeholder="请输入搜索内容" clearable @change="inputChange" @keydown="inputKeydown">
        <template #append>
          <el-tooltip content="按 “Enter” 键添加" placement="top" effect="dark">
            <el-button :disabled="!addable" icon="el-icon-plus" @click="addNewTodoItem"></el-button>
          </el-tooltip>
        </template>
      </el-input>
    </div>
    <div class="todo-list">
      <TodoItem
        v-for="item in displayList"
        :item="item"
        :key="item.id"
        @switch-status="ss"
        @edit="edit"
        @del="del"
      />
    </div>
  </main>
  <el-dialog
    title="编辑内容"
    v-model="dialogVisible"
    width="80%">
    <el-form :model="editItem" size="normal" label-width="40px">
      <el-form-item label="标题" prop="title">
        <div style="text-align: left; font-weight: 700;">{{editItem.title}}</div>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input v-model="editItem.content" type="textarea" placeholder="请输入内容" :rows="5" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="editCommit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, computed } from 'vue'
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  setup () {
    const TODO_KEY = '__todo_list__'
    const getTodoList = () => JSON.parse(localStorage.getItem(TODO_KEY) || '[]')

    const title = ref('')
    const todoList = ref(getTodoList())

    const setTodoList = () => localStorage.setItem(TODO_KEY, JSON.stringify(todoList.value))

    const filterKeys = ['title', 'content']
    const filteredList = computed(() => title.value
      ? todoList.value.filter(i => filterKeys.some(k => ~i[k].indexOf(title.value)))
      : todoList.value)

    const showDoneList = ref(false)
    const displayList = computed(() => filteredList.value.filter(i => !i.deleted && i.done === showDoneList.value))

    const addable = computed(() => !!title.value)

    const isEnterDown = ref(false)
    const dialogVisible = ref(false)
    const editItem = ref({})

    const addNewTodoItem = () => {
      todoList.value.push({
        id: Math.random().toString(),
        title: title.value,
        content: '',
        created: Date.now(),
        done: false,
        deleted: false
      })
      title.value = ''
      setTodoList()
    }

    const inputKeydown = e => { isEnterDown.value = e.key === 'Enter' }

    const inputChange = e => {
      title.value = title.value.trim()
      if (showDoneList.value || !title.value) return
      if (isEnterDown.value) {
        isEnterDown.value = false
        addNewTodoItem()
      }
    }

    const ss = (id, s) => todoList.value.some(i => i.id === id && ((i.done = s) || true)) && setTodoList()

    const edit = item => {
      editItem.value = Object.assign({}, item)
      dialogVisible.value = true
    }

    const del = id => todoList.value.some(i => i.id === id && (i.deleted = true)) && setTodoList()

    const editCommit = () => {
      todoList.value.some(i => i.id === editItem.value.id && (i.content = editItem.value.content))
      editItem.value = {}
      setTodoList()
      dialogVisible.value = false
    }

    return {
      addable,
      dialogVisible,
      editItem,
      title,
      showDoneList,
      displayList,
      inputChange,
      inputKeydown,
      addNewTodoItem,
      ss,
      edit,
      del,
      editCommit
    }
  }
}
</script>

<style scoped>
main {
  text-align: center;
  padding: 1em;
  max-width: 480px;
  margin: 0 auto;
  background-color: #bedbbb;
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
}

h1 {
  color: #113e66;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 100;
  margin: 20px 0;
}

.switch-mode {
  padding: 8px 0;
}

::v-deep .el-switch__label {
  color: #999;
}

::v-deep .el-switch__label.is-active {
  color: #59886b;
}

.input-todo-titke {
  padding: 0 4px;
}

.todo-list {
  margin-top: 16px;
  padding: 0 4px;
  height: calc(100vh - 238px);
  overflow-y: auto;
}

.todo-list>*:nth-child(n + 2) {
  margin-top: 16px;
}
</style>
